<template>
 
  <view class="page flex-col">
        <view class="group_1 flex-row">
          <view class="group_6 flex-col">
            <view class="group_7 flex-row">
              <span class="text_18">9:41</span>
              <img
                class="thumbnail_3"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngbc8b065cb049f3558ed13cee883f7ebb4208566613d62057412ff18adb258d03"
              />
              <img
                class="thumbnail_4"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnge2d0210b0e3c9c22cdd72f51a0b2c53768cc7d90ef6a325508602b5e17d0fe30"
              />
              <img
                class="image_4"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng94453512b80fc09beef7531f197aa618ef23723c1db4743928447c71bed4cb28"
              />
            </view>
            <view class="nav-bar_2 flex-col">
              <span class="text_2">曦联云</span>
            </view>
            <view class="group_3 flex-row justify-end">
              <view class="text-wrapper_3 flex-col">
                <span class="text_3">设备总数</span>
                <span class="text_4">{{devicenum}}</span> 
				<span class="text_5">在线</span>
                <span class="text_6">{{onlinenum}}</span>
              </view>
              <view class="text-wrapper_4 flex-col">
                <span class="text_7">准备</span> 
				<span class="text_8">{{preparationnum}}</span>
              </view>
              <view class="section_1 flex-row">
                <view class="text-group_5 flex-col">
                  <span class="text_9">离线</span>
                  <span class="text_10">{{offlinenum}}</span>
                </view>
              </view>
            </view>
            <view class="group_4 flex-row justify-between">
              <view class="image-text_4 flex-row justify-between">
                <view class="tag_1 flex-row">
                  <view class="image-text_5 flex-row justify-between">
                    <img
                      class="icon_1"
                      referrerpolicy="no-referrer"
                      src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng87ea588bece601361e6597eea6e08d7fe10435c774b1569d93a55153a962b8e3"
                    />
                    <span class="text-group_2">公告</span>
                  </view>
                  <view class="image-text_6 flex-row justify-between">
                    <img
                      class="icon_1"
                      referrerpolicy="no-referrer"
                      src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng87ea588bece601361e6597eea6e08d7fe10435c774b1569d93a55153a962b8e3"
                    />
                    <span class="text-group_2">公告</span>
                  </view>
                </view>
                <span class="text-group_3">欢迎使用曦联云</span>
              </view>
              <view class="icon_2 flex-col"></view>
            </view>
            <view class="group_8 flex-row">
              <img
                class="image_2"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8835c44e4c5ecae52c029b87de4101f89e32284bd80110ca8681b75a4b4af6b3"
              />
              <span class="text_11">设备列表</span>
            </view>
			
			
			
				<view class="group_9 flex-col">
					<scroll-view :scroll-y="true" style="height: 750rpx;">
					<view  v-for="(item, index) in numList" :key="index">
						<view class="list-items_1 flex-row justify-between">
						  <img
						    class="image_5"
						    referrerpolicy="no-referrer"
						    src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1f62e1538bab74540e47e37fd4c90e171547e226c2823fbd754918d66810b591"/>
							<view class="block_2 flex-col">
						    <view class="text-group_6 flex-col">
						      <span class="text_12">手机</span>
						      <span class="text_13">这是一段副文案</span>
						    </view>
							<button class="button_1 flex-col">
								<span class="text_14">功能按钮</span>
							</button>
							</view>
						</view>
					</view>
					</scroll-view>
					<span class="paragraph_1">Copyright&nbsp;&#64;2023厦门曦联云国际电子商务有限公司<br />粤ICP备2023121739号-1</span>
					<img
					  class="image_3"
					  referrerpolicy="no-referrer"
					  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf7e9fe1f53c7985813d6ba289b9b80e84d0412f75a6833bbfb9ed4a865f70b62"
					/>
				</view>
				
						
		
            
          </view>
		  
		  
		  
		  
		  
		  
          
        </view>
      </view>
</template>

<script>
	import { deviceNumber,parationNumber,onlineNumber } from '../api/system/index.js'
	import { userID } from '../api/system/user.js'
  export default {
    onLoad: function() {
    },
	data(){
		return{
			userId:'',		//动态Id	
			devicenum:0,   //保存设备数量
			preparationnum: 0, //准备数量
			onlinenum:0, //在线数量
			offlinenum:0, //离线数量
			loopData0:[],	//渲染设备
		}
	},
	mounted(){
		this.getdeviceNumber()
		this.getparationNumber()
		this.getonlinenum()
	},
	methods:{
		// 获取动态Id
		async myUser(){
			const userId = await userID()
			console.log('获取信息成功',userId);
			return userId
		},
		// 获取设备数量
		async getdeviceNumber(){
			const userId = await this.myUser()
			deviceNumber(userId).then(res=>{
				console.log('请求成功设备数量',res);
				 this.devicenum = res
			})
			
		},
		// 获取准备数量
		async getparationNumber(){
			const userId = await this.myUser()
			parationNumber(userId).then(res=>{
				console.log('请求成功准备数量',res);
				 this.preparationnum = res
			})
		},
		
		// 获取在线数量
		async getonlinenum(){
			const userId = await this.myUser()
			onlineNumber(userId).then(res=>{
				console.log('请求成功在线数量',res);
				 this.onlinenum = res
			})
		}
	},
	computed: {
	    numList() {
	      return Array.from({ length: this.devicenum }, (v, k) => k + 1) // 根据num计算出numList
	    }
	  }
  }
</script>
<style>
@import url("../pages/common/common.css");
</style>
<style lang="scss">  

	.page {
	  background-color: rgba(7, 12, 28, 1);
	  position: relative;
	  width: 100%;
	  height: 812px;
	  overflow: hidden;
	  align-items: center;
	}
	
	.group_1 {
	  background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/abb6576179bf461ca6089830680d20a6_mergeImage.png);
	}
	
	.group_6 {
	  position: relative;
	  margin-bottom: 82px;
	  padding: 16px 0 35px 0;
	}
	
	.group_7 {
	  margin: 0 11px 0 17px;
	}
	
	.text_18 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 15px;
	  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
	  font-weight: NaN;
	  text-align: right;
	  white-space: nowrap;
	  line-height: 18px;
	}
	
	.thumbnail_3 {
	  width: 17px;
	  height: 11px;
	  margin: 4px 0 3px 223px;
	}
	
	.thumbnail_4 {
	  width: 15px;
	  height: 11px;
	  margin: 3px 0 4px 6px;
	}
	
	.image_4 {
	  width: 25px;
	  height: 12px;
	  margin: 3px 0 3px 7px;
	}
	
	.nav-bar_2 {
	  margin-top: 11px;
	  padding: 6px 295px 5px 14px;
	}
	
	.text_2 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 22px;
	  font-family: PingFangSC-Semibold;
	  font-weight: 600;
	  text-align: right;
	  white-space: nowrap;
	  line-height: 30px;
	}
	
	.group_3 {
	  width: 347px;
	  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngeb0b1c875d8d9334fde6744cab310fa203b60d10e2149dc7586c813562b6299e)
	    100% no-repeat;
	  background-size: 100% 100%;
	  align-self: center;
	  margin-top: 10px;
	  padding-left: 12px;
	}
	
	.text-wrapper_3 {
	  margin: 16px 0 15px 0;
	}
	
	.text_3 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 12px;
	  font-family: PingFangSC-Regular;
	  font-weight: NaN;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 17px;
	  margin-right: 18px;
	}
	
	.text_4 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 34px;
	  font-family: DINAlternate-Bold;
	  font-weight: 700;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 34px;
	  margin-top: 10px;
	}
	
	.text_5 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 12px;
	  font-family: PingFangSC-Regular;
	  font-weight: NaN;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 17px;
	  margin: 12px 42px 0 0;
	}
	
	.text_6 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 22px;
	  font-family: DINAlternate-Bold;
	  font-weight: 700;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 22px;
	  margin: 10px 34px 0 0;
	}
	
	.text-wrapper_4 {
	  margin: 89px 0 15px 38px;
	}
	
	.text_7 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 12px;
	  font-family: PingFangSC-Regular;
	  font-weight: NaN;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 17px;
	  margin-right: 19px;
	}
	
	.text_8 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 22px;
	  font-family: DINAlternate-Bold;
	  font-weight: 700;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 22px;
	  margin-top: 10px;
	}
	
	.section_1 {
	  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngbd2b7d2130c7e9af2e2cbb41de2dacd204f94d47e04a1ae933b716246776c869)
	    100% no-repeat;
	  background-size: 100% 100%;
	  margin-left: -32px;
	  padding: 89px 84px 15px 104px;
	}
	
	.text-group_5 {
	}
	
	.text_9 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 12px;
	  font-family: PingFangSC-Regular;
	  font-weight: NaN;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 17px;
	  margin-right: 8px;
	}
	
	.text_10 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 22px;
	  font-family: DINAlternate-Bold;
	  font-weight: 700;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 22px;
	  margin-top: 10px;
	}
	
	.group_4 {
	  width: 347px;
	  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2c937d72dfba7cde2e62ce176e35fced2bf53ef284e72edbb7c078933e9e2876)
	    100% no-repeat;
	  background-size: 100% 100%;
	  align-self: center;
	  margin-top: 16px;
	  padding: 6px 10px 6px 10px;
	}
	
	.image-text_4 {
	  width: 153px;
	}
	
	.tag_1 {
	  position: relative;
	  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng35127190e2508c9ce26090278806569a75909cfb16b5908c9981241803137dd2)
	    100% no-repeat;
	  background-size: 100% 100%;
	  padding: 3px 11px 3px 5px;
	}
	
	.image-text_5 {
	  width: 41px;
	}
	
	.icon_1 {
	  width: 12px;
	  height: 12px;
	  margin: 1px 0 1px 0;
	}
	
	.text-group_2 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 14px;
	  font-family: YouSheBiaoTiHei;
	  font-weight: NaN;
	  text-align: right;
	  white-space: nowrap;
	  line-height: 14px;
	}
	
	.image-text_6 {
	  position: absolute;
	  left: 5px;
	  top: 3px;
	  width: 41px;
	  height: 14px;
	}
	
	.icon_1 {
	  width: 12px;
	  height: 12px;
	  margin: 1px 0 1px 0;
	}
	
	.text-group_2 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 14px;
	  font-family: YouSheBiaoTiHei;
	  font-weight: NaN;
	  text-align: right;
	  white-space: nowrap;
	  line-height: 14px;
	}
	
	.text-group_3 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 12px;
	  font-family: PingFangSC-Regular;
	  font-weight: NaN;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 12px;
	  margin-top: 4px;
	}
	
	.icon_2 {
	  width: 14px;
	  height: 14px;
	  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng5fffc097761ba04e995e043d647c3035a825a8a2a4b61aed306eb1d2beea899a)
	    100% no-repeat;
	  background-size: 100% 100%;
	  margin: 3px 0 3px 0;
	}
	
	.group_8 {
	  margin: 16px 305px 0 10px;
	}
	
	.image_2 {
	  width: 34px;
	  height: 8px;
	  margin-top: 12px;
	}
	
	.text_11 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 14px;
	  font-family: PingFangSC-Semibold;
	  font-weight: 600;
	  text-align: right;
	  white-space: nowrap;
	  line-height: 20px;
	  margin-left: -30px;
	}
	
	.group_9 {
	  width: 347px;
	  align-self: center;
	  margin-top: 16px;
	}
	
	.list-items_1 {
	  border-radius: 12px;
	  background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/b9d368af437345f8837f03d55deee560_mergeImage.png);
	  width: 347px;
	  border: 0.3px solid;
	  padding: 10.7px 136.7px 10.7px 33.7px;
	}
	
	.image_5 {
	  width: 44px;
	  height: 81px;
	  margin: 3px 0 3px 0;
	}
	
	.block_2 {
	}
	
	.text-group_6 {
	}
	
	.text_12 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 18px;
	  font-family: PingFangSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 25px;
	  margin-right: 48px;
	}
	
	.text_13 {
	  overflow-wrap: break-word;
	  color: rgba(172, 172, 172, 1);
	  font-size: 12px;
	  font-family: PingFangSC-Regular;
	  font-weight: NaN;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 12px;
	  margin-top: 9px;
	}
	
	.button_1 {
	  background-color: rgba(255, 255, 255, 0.05);
	  border-radius: 18px;
	  margin: 9px 2px 0 0;
	  padding: 9px 16px 9px 16px;
	}
	
	.text_14 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 12px;
	  font-family: PingFangSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 12px;
	}
	
	.box_1 {
	  border-radius: 12px;
	  background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/c6915ed8478445ec97b0abae2a49f15a_mergeImage.png);
	  border: 0.3px solid;
	  margin-top: 14px;
	  padding: 10.7px 136.7px 10.7px 125.7px;
	}
	
	.text-group_7 {
	}
	
	.text_19 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 18px;
	  font-family: PingFangSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 25px;
	  margin-right: 48px;
	}
	
	.text_20 {
	  overflow-wrap: break-word;
	  color: rgba(172, 172, 172, 1);
	  font-size: 12px;
	  font-family: PingFangSC-Regular;
	  font-weight: NaN;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 12px;
	  margin-top: 9px;
	}
	
	.button_2 {
	  background-color: rgba(255, 255, 255, 0.15);
	  border-radius: 18px;
	  margin: 9px 2px 0 0;
	  padding: 9px 16px 9px 16px;
	}
	
	.text_21 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 12px;
	  font-family: PingFangSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 12px;
	}
	
	.paragraph_1 {
	  width: 232px;
	  height: 28px;
	  overflow-wrap: break-word;
	  color: rgba(90, 90, 90, 1);
	  font-size: 10px;
	  font-family: PingFangSC-Regular;
	  font-weight: NaN;
	  text-align: right;
	  line-height: 14px;
	  align-self: center;
	  margin-top: 20px;
	}
	
	.image_3 {
	  position: absolute;
	  left: 253px;
	  top: 90px;
	  width: 100px;
	  height: 82px;
	}
	
	.tab-bar_1 {
	  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9402a950be7f119625743c7d1f72bf77fce5bffd7ad2659fc6d141fc7cff5908)
	    100% no-repeat;
	  background-size: 100% 100%;
	  margin: 729px 0 0 -375px;
	  padding: 10px 51px 8px 53px;
	}
	
	.block_3 {
	}
	
	.tab-bar-item_7 {
	  margin-top: 2px;
	}
	
	.icon_9 {
	  width: 20px;
	  height: 20px;
	}
	
	.text_15 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 9px;
	  font-family: PingFangSC-Semibold;
	  font-weight: 600;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 9px;
	  align-self: center;
	  margin-top: 5px;
	}
	
	.tab-bar-item_8 {
	  margin: 2px 0 14px 13px;
	}
	
	.icon_10 {
	  width: 20px;
	  height: 20px;
	}
	
	.tab-bar-item_9 {
	  margin-left: 73px;
	}
	
	.icon_11 {
	  width: 19px;
	  height: 22px;
	}
	
	.text_16 {
	  overflow-wrap: break-word;
	  color: rgba(85, 86, 101, 1);
	  font-size: 9px;
	  font-family: PingFangSC-Semibold;
	  font-weight: 600;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 9px;
	  margin: 5px 1px 0 0;
	}
	
	.tab-bar-item_10 {
	  margin: 0 0 14px 14px;
	}
	
	.icon_12 {
	  width: 19px;
	  height: 22px;
	}
	
	.tab-bar-item_11 {
	  margin: 0 0 14px 38px;
	}
	
	.icon_13 {
	  width: 22px;
	  height: 22px;
	}
	
	.tab-bar-item_12 {
	  margin-left: 11px;
	}
	
	.icon_14 {
	  width: 22px;
	  height: 22px;
	}
	
	.text_17 {
	  overflow-wrap: break-word;
	  color: rgba(85, 86, 101, 1);
	  font-size: 9px;
	  font-family: PingFangSC-Semibold;
	  font-weight: 600;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 9px;
	  align-self: center;
	  margin-top: 5px;
	}
	
	.block_4 {
	  width: 134px;
	  align-self: center;
	  margin-top: 24px;
	}
	
	.home-indicator_1 {
	  background-color: rgba(255, 255, 255, 1);
	  border-radius: 100px;
	  width: 134px;
	  height: 5px;
	}
	

</style>
